# 手机号注册页面
<template>
  <view class="uni-content">
    <view class="login-logo">
      <image :src="logo"></image>
    </view>
    
    <text class="title">账号注册</text>
    
    <view class="form-box">
      <uni-easyinput
        :inputBorder="false"
        :focus="focusUsername"
        @blur="focusUsername = false"
        class="input-box"
        v-model="formData.username"
        maxlength="32"
        placeholder="请输入用户名"
      />
      <uni-easyinput
        :inputBorder="false"
        :focus="focusPassword"
        @blur="focusPassword = false"
        class="input-box"
        type="password"
        v-model="formData.password"
        maxlength="20"
        placeholder="请输入密码(6-20位)"
      />
      <uni-easyinput
        :inputBorder="false"
        :focus="focusPassword2"
        @blur="focusPassword2 = false"
        class="input-box"
        type="password"
        v-model="formData.password2"
        maxlength="20"
        placeholder="请再次输入密码"
      />
      <uni-easyinput
        :inputBorder="false"
        :focus="focusNickname"
        @blur="focusNickname = false"
        class="input-box"
        v-model="formData.nickname"
        maxlength="32"
        placeholder="请输入昵称(可选)"
      />
      <uni-captcha ref="captcha" scene="register" v-model="formData.captcha" />
    </view>

    <button class="uni-btn" type="primary" @click="submit">注册</button>
    
    <view class="link-box">
      <text class="link" @click="toLogin">已有账号？点此登录</text>
    </view>
  </view>
</template>

<script>
const uniIdCo = uniCloud.importObject('uni-id-co')

export default {
  data() {
    return {
      formData: {
        username: '',
        password: '',
        password2: '',
        nickname: '',
        captcha: ''
      },
      focusUsername: true,
      focusPassword: false,
      focusPassword2: false,
      focusNickname: false,
      logo: '/static/logo.png'
    }
  },
  methods: {
    // 提交注册
    async submit() {
      if (!this.formData.username) {
        return uni.showToast({ title: '请输入用户名', icon: 'none' })
      }
      if (!this.formData.password || this.formData.password.length < 6) {
        return uni.showToast({ title: '请输入6位以上密码', icon: 'none' })
      }
      if (this.formData.password !== this.formData.password2) {
        return uni.showToast({ title: '两次输入的密码不一致', icon: 'none' })
      }
      if (!this.formData.captcha || this.formData.captcha.length < 4) {
        this.$refs.captcha.focusCaptchaInput = true;
        return uni.showToast({ title: '请输入验证码', icon: 'none' })
      }
      try {
        const res = await uniIdCo.registerUser(this.formData)
        console.log(res)
        if (res.errCode === 0) {

          let userInfo = {
            userId: res.uid,
            nickname: this.formData.nickname || this.formData.username,
            avatar: '/static/default-avatar.png'
          }

          uni.setStorageSync('uni_id_token', res.newToken.token)
          uni.setStorageSync('uni_id_token_expired', res.newToken.tokenExpired)
          uni.setStorageSync('userInfo', userInfo)
          uni.showToast({ title: '注册成功', icon: 'success' })
          uni.reLaunch({ url: '/pages/my/my' })
        } else {
          uni.showToast({ title: res.errMsg || '注册失败', icon: 'none' })
          this.$refs.captcha.getImageCaptcha()
        }
      } catch (e) {
        uni.showToast({ title: e.errMsg || '注册失败', icon: 'none' })
        this.$refs.captcha.getImageCaptcha()
      }
    },
    
    // 跳转到登录页
    toLogin() {
      uni.navigateTo({
        url: '/pages/login/login'
      })
    }
  }
}
</script>

<style lang="scss">
.uni-content {
  padding: 0 60rpx;
}

.login-logo {
  display: flex;
  justify-content: center;
  margin: 80rpx 0;
  
  image {
    width: 160rpx;
    height: 160rpx;
  }
}

.title {
  font-size: 38rpx;
  font-weight: 600;
  margin-bottom: 80rpx;
  text-align: center;
}

.form-box {
  margin-bottom: 40rpx;
  background-color: #f8f8f8;
  border-radius: 8rpx;
  padding: 20rpx 20rpx 0 20rpx;
}

.input-box {
  height: 110rpx;
  margin-bottom: 20rpx;
  font-size: 32rpx;
}

.uni-btn {
  margin: 60rpx 0;
}

.link-box {
  text-align: center;
  margin-top: 40rpx;
  
  .link {
    color: #007AFF;
    font-size: 28rpx;
  }
}

::v-deep .uni-easyinput__content-input {
  font-size: 32rpx !important;
  line-height: 110rpx !important;
  height: 110rpx !important;
}
</style> 